<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p><input type="text" v-model="num1" /></p>
    <p>
      <select v-model="opt">
        <option value="">-请选择-</option>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
    </p>
    <p><input type="text" v-model="num2" /></p>
    <p><button >=</button></p>
    <p><span>{{ rst }}</span></p>
    
  </div>
  <script src="./vue.js"></script>

  <script>


    // 加法计算器：v-model + 事件绑定 + 响应式 + this + 数据类型转换为数值的
    var vm = new Vue({
      el:'#app',
      data:{
        num1:'',
        num2:'',
        result:'',
        opt:'/' // 计算器操作符号 + - * /  可以设置 或 接收 下拉列表选中项目
      },
      computed:{
        rst(){
          if(this.num1.trim() && this.num2.trim() && this.opt){
            return eval(`${Number(this.num1)} ${this.opt} ${Number(this.num2)}`).toFixed(3)
          }
        }
      }
    })
  </script>
</body>
</html>
